<template>
  <div class="app-container">
    <!-- 搜索区域 -->
    <el-card>
      <el-form :model="searchForm" inline class="search-form">
        <el-row :gutter="20" style="width: 100%">
          <el-col :span="4">
            <el-form-item label="工单编号">
              <el-input v-model="searchForm.workOrderNumber" placeholder="工单编号" clearable :prefix-icon="Search"
                maxlength="50" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="工单状态">
              <el-select v-model="searchForm.workOrderStatus" placeholder="工单状态" clearable style="width: 100%">
                <el-option label="全部状态" value="" />
                <el-option label="待化验" value="0" />
                <el-option label="已完成" value="1" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="优先级">
              <el-select v-model="searchForm.priority" placeholder="优先级" clearable style="width: 100%">
                <el-option label="全部优先级" value="" />
                <el-option v-for="item in priorityOptions" :key="item.dictValue" :label="item.dictLabel"
                  :value="item.dictValue" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="化验类型">
              <el-select v-model="searchForm.workType" placeholder="化验类型" clearable style="width: 100%">
                <el-option label="全部类型" value="" />
                <el-option v-for="item in workTypeOptions" :key="item.dictValue" :label="item.dictLabel"
                  :value="item.dictValue" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="选择日期">
              <el-date-picker style="width: 100%" v-model="searchForm.dateRange" type="daterange" range-separator="至"
                start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD" :prefix-icon="Calendar" />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-button type="primary" @click="handleSearch" :icon="Search">搜索</el-button>
            <el-button @click="resetSearch" :icon="Refresh">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 操作按钮区域 -->
    <el-card class="mt-2">
      <div class="table-header">
        <div class="table-actions">
          <el-button type="primary" @click="handleCreate" :icon="Plus">新建工单</el-button>
          <el-button type="success" @click="handleExport" :icon="Download">导出</el-button>
        </div>
      </div>
      <!-- 数据表格 -->
      <el-table :data="tableData" border class="mt-2" style="width: 100%" v-loading="loading"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column type="index" label="序号" width="60" align="center" />
        <el-table-column prop="workOrderNumber" label="工单编号" width="150" align="center" />
        <el-table-column prop="samplingTime" label="采样时间" width="180" align="center" />
        <el-table-column prop="samplingLocation" label="采样地点" width="150" align="center" />
        <el-table-column prop="workType" label="化验类型" width="120" align="center">
          <template #default="{ row }">
            <el-tag :type="getWorkTypeTagType(row.workType)">
              {{ getWorkTypeName(row.workType) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="priority" label="优先级" width="100" align="center">
          <template #default="{ row }">
            <el-tag :type="getPriorityTagType(row.priority)">
              {{ getPriorityName(row.priority) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="testItemName" label="化验项目" align="center">
          <template #default="{ row }">
            <el-tag v-if="row.testItemName" type="info" size="small">
              {{ row.testItemName }}
            </el-tag>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column prop="testItemResult" label="化验结果" align="center">
          <template #default="{ row }">
            <span :class="getResultClass(row.testItemResult)">
              {{ row.testItemResult || '-' }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="confirmPerson" label="检测人员" width="120" align="center" />
        <el-table-column prop="workOrderStatus" label="状态" width="100" align="center">
          <template #default="{ row }">
            <el-tag :type="getStatusTagType(row.workOrderStatus)">
              {{ getStatusName(row.workOrderStatus) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="completionTime" label="完成时间" width="180" align="center">
          <template #default="{ row }">
            {{ row.completionTime || '-' }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="280" align="center" fixed="right">
          <template #default="{ row }">
            <el-button size="small" @click="handleView(row.id)" :icon="View">查看</el-button>
            <el-button size="small" type="success" @click="handleSubmitResult(row)" :icon="Check"
              v-if="row.workOrderStatus === '0'">提交结果</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination v-model:current-page="pagination.currentPage" v-model:page-size="pagination.pageSize"
          :total="pagination.total" :page-sizes="[10, 20, 30, 50]" layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </el-card>

    <!-- 新建工单对话框 -->
    <el-dialog v-model="showCreateDialog" title="新建化验工单" width="600px" @closed="resetCreateForm">
      <el-form ref="createFormRef" :model="createForm" :rules="createRules" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="采样地点" prop="samplingLocation">
              <el-select v-model="createForm.samplingLocation" placeholder="请选择采样地点" style="width: 100%">
                <el-option v-for="item in samplingLocationOptions" :key="item.dictValue" :label="item.dictLabel"
                  :value="item.dictValue" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="采样时间" prop="samplingTime">
              <el-date-picker v-model="createForm.samplingTime" type="datetime" placeholder="选择采样时间" style="width: 100%"
                value-format="YYYY-MM-DD HH:mm:ss" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="化验类型" prop="workType">
              <el-select v-model="createForm.workType" placeholder="请选择化验类型" style="width: 100%">
                <el-option v-for="item in workTypeOptions" :key="item.dictValue" :label="item.dictLabel"
                  :value="item.dictValue" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="优先级" prop="priority">
              <el-select v-model="createForm.priority" placeholder="请选择优先级" style="width: 100%">
                <el-option v-for="item in priorityOptions" :key="item.dictValue" :label="item.dictLabel"
                  :value="item.dictValue" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="化验项目" prop="testItemIds">
          <el-select v-model="createForm.testItemIds" multiple placeholder="请选择化验项目" style="width: 100%">
            <el-option v-for="item in itemOptions" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>

        <el-form-item label="检测人员" prop="confirmPerson">
          <el-input v-model="createForm.confirmPerson" placeholder="请输入检测人员姓名" />
        </el-form-item>

        <el-form-item label="备注信息">
          <el-input v-model="createForm.remarks" type="textarea" :rows="3" placeholder="请输入备注信息" />
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="showCreateDialog = false">取消</el-button>
        <el-button type="primary" @click="submitCreateForm">确定</el-button>
      </template>
    </el-dialog>

    <!-- 查看详情对话框 -->
    <el-dialog v-model="showDetailDialog" :title="`工单详情 - ${detailData.workOrderNumber}`" width="800px">
      <el-descriptions v-if="detailData.id" :column="2" border>
        <el-descriptions-item label="工单编号">{{ detailData.workOrderNumber }}</el-descriptions-item>
        <el-descriptions-item label="工单状态">
          <el-tag :type="getStatusTagType(detailData.workOrderStatus)">
            {{ getStatusName(detailData.workOrderStatus) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="化验类型">
          <el-tag :type="getWorkTypeTagType(detailData.workType)">
            {{ getWorkTypeName(detailData.workType) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="优先级">
          <el-tag :type="getPriorityTagType(detailData.priority)">
            {{ getPriorityName(detailData.priority) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="采样地点">{{ detailData.samplingLocation }}</el-descriptions-item>
        <el-descriptions-item label="采样时间">{{ detailData.samplingTime }}</el-descriptions-item>
        <el-descriptions-item label="检测人员">{{ detailData.confirmPerson }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ detailData.createTime }}</el-descriptions-item>
        <el-descriptions-item label="完成时间">{{ detailData.completionTime || '未完成' }}</el-descriptions-item>
      </el-descriptions>

      <!-- 化验项目详情 -->
      <el-divider />
      <h3>化验项目详情</h3>
      <el-table :data="detailData.items" border v-if="detailData.items && detailData.items.length > 0">
        <el-table-column prop="name" label="项目名称" align="center" />
        <el-table-column prop="unit" label="单位" align="center" width="100" />
        <el-table-column prop="standardRange" label="标准范围" align="center" width="150" />
        <el-table-column prop="testResult" label="检测结果" align="center" width="150">
          <template #default="{ row }">
            <span :class="getResultClass(row.testResult)">
              {{ row.testResult || '未检测' }}
            </span>
          </template>
        </el-table-column>
      </el-table>
      <div v-else class="no-data">暂无化验项目数据</div>

      <template #footer>
        <el-button @click="showDetailDialog = false">关闭</el-button>
        <el-button v-if="detailData.workOrderStatus === '0'" type="success" @click="handleSubmitResult(detailData)">
          提交结果
        </el-button>
      </template>
    </el-dialog>

    <!-- 提交化验结果对话框 -->
    <el-dialog v-model="showSubmitDialog" :title="`提交化验结果 - ${submitData.workOrderNumber}`" width="700px">
      <el-form ref="submitFormRef" :model="submitForm" label-width="120px">
        <el-form-item label="采样地点">
          <el-input v-model="submitForm.samplingLocation" readonly />
        </el-form-item>

        <el-divider />
        <h3>化验结果填写</h3>

        <el-table :data="submitForm.items" border>
          <el-table-column prop="name" label="项目名称" align="center" width="120" />
          <el-table-column prop="unit" label="单位" align="center" width="80" />
          <el-table-column prop="standardRange" label="标准范围" align="center" width="120" />
          <el-table-column label="检测结果" align="center" width="150">
            <template #default="{ row, $index }">
              <el-input v-model="row.testResult" placeholder="请输入检测结果" @blur="validateResult(row, $index)" />
            </template>
          </el-table-column>
          <el-table-column label="状态" align="center" width="100">
            <template #default="{ row }">
              <el-tag v-if="row.testResult" :type="checkResultStatus(row) ? 'success' : 'danger'">
                {{ checkResultStatus(row) ? '正常' : '异常' }}
              </el-tag>
              <span v-else>-</span>
            </template>
          </el-table-column>
        </el-table>

        <el-form-item label="备注信息" class="mt-2">
          <el-input v-model="submitForm.remarks" type="textarea" :rows="3" placeholder="请输入备注信息" />
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="showSubmitDialog = false">取消</el-button>
        <el-button type="primary" @click="submitResultForm">提交结果</el-button>
      </template>
    </el-dialog>

    <!-- 编辑工单对话框 -->
    <el-dialog v-model="showEditDialog" title="编辑化验工单" width="600px" @closed="resetEditForm">
      <el-form ref="editFormRef" :model="editForm" :rules="editRules" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="采样地点" prop="samplingLocation">
              <el-select v-model="editForm.samplingLocation" placeholder="请选择采样地点" style="width: 100%">
                <el-option v-for="item in samplingLocationOptions" :key="item.dictValue" :label="item.dictLabel"
                  :value="item.dictValue" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="采样时间" prop="samplingTime">
              <el-date-picker v-model="editForm.samplingTime" type="datetime" placeholder="选择采样时间" style="width: 100%"
                value-format="YYYY-MM-DD HH:mm:ss" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="化验类型" prop="workType">
              <el-select v-model="editForm.workType" placeholder="请选择化验类型" style="width: 100%">
                <el-option v-for="item in workTypeOptions" :key="item.dictValue" :label="item.dictLabel"
                  :value="item.dictValue" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="优先级" prop="priority">
              <el-select v-model="editForm.priority" placeholder="请选择优先级" style="width: 100%">
                <el-option v-for="item in priorityOptions" :key="item.dictValue" :label="item.dictLabel"
                  :value="item.dictValue" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="检测人员" prop="confirmPerson">
          <el-input v-model="editForm.confirmPerson" placeholder="请输入检测人员姓名" />
        </el-form-item>

        <el-form-item label="备注信息">
          <el-input v-model="editForm.remarks" type="textarea" :rows="3" placeholder="请输入备注信息" />
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="showEditDialog = false">取消</el-button>
        <el-button type="primary" @click="submitEditForm">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Search, Refresh, Calendar, Plus, Download, Delete, View, Edit, Check
} from '@element-plus/icons-vue'

// API导入
import {
  getWorkPriorityList,
  getWorkTypeList,
  getItemList,
  getSamplingLocationList,
  getLaboratoryWorkOrderList,
  getLaboratoryWorkOrderDetail,
  getLaboratoryWorkOrderInfo,
  addLaboratoryWorkOrder,
  updateLaboratoryWorkOrder,
  deleteLaboratoryWorkOrder,
  batchDeleteLaboratoryWorkOrder,
  submitLaboratoryResult,
  exportLaboratoryWorkOrder
} from '@/api/prod_operate/water/work'

const {proxy} = getCurrentInstance();


// 搜索表单
const searchForm = reactive({
  workOrderNumber: '',
  workOrderStatus: '',
  priority: '',
  workType: '',
  dateRange: []
})

// 分页信息
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
})

// 表格数据
const tableData = ref([])
const loading = ref(false)
const selectedRows = ref([])

// 下拉选项数据
const priorityOptions = ref([])
const workTypeOptions = ref([])
const itemOptions = ref([])
const samplingLocationOptions = ref([])

// 对话框控制
const showCreateDialog = ref(false)
const showDetailDialog = ref(false)
const showSubmitDialog = ref(false)
const showEditDialog = ref(false)

// 表单数据
const createForm = reactive({
  samplingLocation: '',
  samplingTime: '',
  workType: '',
  priority: '',
  testItemIds: [],
  confirmPerson: '',
  remarks: ''
})

const editForm = reactive({
  id: null,
  samplingLocation: '',
  samplingTime: '',
  workType: '',
  priority: '',
  confirmPerson: '',
  remarks: ''
})

const submitForm = reactive({
  id: null,
  samplingLocation: '',
  items: [],
  remarks: ''
})

// 详情数据
const detailData = ref({})
const submitData = ref({})

// 表单引用
const createFormRef = ref()
const editFormRef = ref()
const submitFormRef = ref()

// 表单验证规则
const createRules = reactive({
  samplingLocation: [
    { required: true, message: '请选择采样地点', trigger: 'change' }
  ],
  samplingTime: [
    { required: true, message: '请选择采样时间', trigger: 'change' }
  ],
  workType: [
    { required: true, message: '请选择化验类型', trigger: 'change' }
  ],
  priority: [
    { required: true, message: '请选择优先级', trigger: 'change' }
  ],
  testItemIds: [
    { required: true, message: '请选择化验项目', trigger: 'change' }
  ],
  confirmPerson: [
    { required: true, message: '请输入检测人员', trigger: 'blur' }
  ]
})

const editRules = reactive({
  samplingLocation: [
    { required: true, message: '请选择采样地点', trigger: 'change' }
  ],
  samplingTime: [
    { required: true, message: '请选择采样时间', trigger: 'change' }
  ],
  workType: [
    { required: true, message: '请选择化验类型', trigger: 'change' }
  ],
  priority: [
    { required: true, message: '请选择优先级', trigger: 'change' }
  ],
  confirmPerson: [
    { required: true, message: '请输入检测人员', trigger: 'blur' }
  ]
})

// 初始化数据
onMounted(() => {
  fetchDropdownData()
  fetchWorkOrderList()
})

// 获取下拉数据
const fetchDropdownData = async () => {
  try {
    const [priorityRes, workTypeRes, itemRes, locationRes] = await Promise.all([
      getWorkPriorityList(),
      getWorkTypeList(),
      getItemList(),
      getSamplingLocationList()
    ])

    priorityOptions.value = priorityRes.data || []
    workTypeOptions.value = workTypeRes.data || []
    itemOptions.value = itemRes.data || []
    samplingLocationOptions.value = locationRes.data || []
  } catch (error) {
    console.error('获取下拉数据失败:', error)
    ElMessage.error('获取下拉数据失败')
  }
}

// 获取工单列表
const fetchWorkOrderList = async () => {
  try {
    loading.value = true

    const params = {
      ...searchForm,
      pageNum: pagination.currentPage,
      pageSize: pagination.pageSize
    }

    // 处理日期范围
    if (searchForm.dateRange && searchForm.dateRange.length === 2) {
      params.startTime = searchForm.dateRange[0]
      params.endTime = searchForm.dateRange[1]
    }

    const res = await getLaboratoryWorkOrderList(params)
    tableData.value = res.rows || []
    pagination.total = res.total || 0
  } catch (error) {
    console.error('获取工单列表失败:', error)
    ElMessage.error('获取工单列表失败')
  } finally {
    loading.value = false
  }
}

// 搜索处理
const handleSearch = () => {
  pagination.currentPage = 1
  fetchWorkOrderList()
}

// 重置搜索
const resetSearch = () => {
  Object.assign(searchForm, {
    workOrderNumber: '',
    workOrderStatus: '',
    priority: '',
    workType: '',
    dateRange: []
  })
  handleSearch()
}

// 刷新数据
const refreshData = () => {
  fetchWorkOrderList()
  ElMessage.success('数据已刷新')
}

// 分页处理
const handleSizeChange = (size) => {
  pagination.pageSize = size
  fetchWorkOrderList()
}

const handleCurrentChange = (page) => {
  pagination.currentPage = page
  fetchWorkOrderList()
}

// 表格选择变化
const handleSelectionChange = (selection) => {
  selectedRows.value = selection
}

// 新建工单
const handleCreate = () => {
  showCreateDialog.value = true
}

// 提交新建表单
const submitCreateForm = async () => {
  try {
    await createFormRef.value.validate()

    await addLaboratoryWorkOrder(createForm)
    ElMessage.success('工单创建成功')
    showCreateDialog.value = false
    resetCreateForm()
    fetchWorkOrderList()
  } catch (error) {
    console.error('创建工单失败:', error)
  }
}

// 重置新建表单
const resetCreateForm = () => {
  createFormRef.value?.resetFields()
  Object.assign(createForm, {
    samplingLocation: '',
    samplingTime: '',
    workType: '',
    priority: '',
    testItemIds: [],
    confirmPerson: '',
    remarks: ''
  })
}

// 查看详情
const handleView = async (id) => {
  try {
    const res = await getLaboratoryWorkOrderInfo(id)
    detailData.value = res.data
    showDetailDialog.value = true
  } catch (error) {
    console.error('获取工单详情失败:', error)
    ElMessage.error('获取工单详情失败')
  }
}

// 导出数据
async function handleExport() {
    try {
        proxy.download("/operation/web/operationLaboratoryDataRecording/export",searchForm , `user_${new Date().getTime()}.xlsx`);
    } catch (error) {
        console.error('导出失败:', error)
        ElMessage.error('导出失败')
    }
}


// 提交编辑表单
const submitEditForm = async () => {
  try {
    await editFormRef.value.validate()

    await updateLaboratoryWorkOrder(editForm)
    ElMessage.success('工单更新成功')
    showEditDialog.value = false
    resetEditForm()
    fetchWorkOrderList()
  } catch (error) {
    console.error('更新工单失败:', error)
  }
}

// 重置编辑表单
const resetEditForm = () => {
  editFormRef.value?.resetFields()
}

// 提交化验结果
const handleSubmitResult = async (row) => {
  try {
    const res = await getLaboratoryWorkOrderDetail(row.id)
    submitData.value = res.data

    Object.assign(submitForm, {
      id: res.data.id,
      samplingLocation: res.data.samplingLocation,
      items: res.data.items || [],
      remarks: res.data.remarks || ''
    })

    showSubmitDialog.value = true
  } catch (error) {
    console.error('获取化验详情失败:', error)
    ElMessage.error('获取化验详情失败')
  }
}

// 验证检测结果
const validateResult = (row, index) => {
  if (row.testResult && isNaN(parseFloat(row.testResult))) {
    ElMessage.warning(`第${index + 1}项检测结果必须为数字`)
    row.testResult = ''
  }
}

// 检查结果状态
const checkResultStatus = (row) => {
  if (!row.testResult || !row.standardRange) return true

  const result = parseFloat(row.testResult)
  const range = row.standardRange

  // 简单范围检查，实际应根据标准范围格式进行解析
  if (range.includes('-')) {
    const [min, max] = range.split('-').map(Number)
    return result >= min && result <= max
  } else if (range.includes('≤')) {
    const max = parseFloat(range.replace('≤', ''))
    return result <= max
  } else if (range.includes('≥')) {
    const min = parseFloat(range.replace('≥', ''))
    return result >= min
  }

  return true
}

// 提交结果表单
const submitResultForm = async () => {
  try {
    // 检查所有项目是否已填写结果
    const unfinishedItems = submitForm.items.filter(item => !item.testResult)
    if (unfinishedItems.length > 0) {
      ElMessage.warning('请填写所有项目的检测结果')
      return
    }

    await submitLaboratoryResult(submitForm)
    ElMessage.success('化验结果提交成功')
    showSubmitDialog.value = false
    fetchWorkOrderList()
  } catch (error) {
    console.error('提交化验结果失败:', error)
    ElMessage.error('提交化验结果失败')
  }
}

// 工具函数
const getStatusName = (status) => {
  return status === '0' ? '待化验' : '已完成'
}

const getStatusTagType = (status) => {
  return status === '0' ? 'warning' : 'success'
}

const getWorkTypeName = (workType) => {
  const workTypeMap = {
    '1': '常规化验',
    '2': '应急化验',
    '3': '周期性化验'
  }
  return workTypeMap[workType] || '未知类型'
}

const getWorkTypeTagType = (workType) => {
  const typeMap = {
    '1': 'success',
    '2': 'danger',
    '3': 'primary'
  }
  return typeMap[workType] || 'info'
}

const getPriorityName = (priority) => {
  const priorityMap = {
    '1': '高',
    '2': '中',
    '3': '低'
  }
  return priorityMap[priority] || '未知'
}

const getPriorityTagType = (priority) => {
  const typeMap = {
    '1': 'danger',
    '2': 'warning',
    '3': 'success'
  }
  return typeMap[priority] || 'info'
}

const getResultClass = (result) => {
  if (!result) return 'result-default'
  return 'result-value'
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.search-form {
  width: 100%;
}

.search-form .el-form-item {
  margin-bottom: 0;
  width: 100%;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.pagination-container {
  margin-top: 20px;
  text-align: right;
}

.mt-2 {
  margin-top: 20px;
}

.no-data {
  text-align: center;
  padding: 20px;
  color: #909399;
}

.result-default {
  color: #909399;
}

.result-value {
  color: #67C23A;
  font-weight: 500;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .search-form .el-col {
    margin-bottom: 16px;
  }
}
</style>